<!--

=========================================================
* Pixel Pro Bootstrap 4 UI Kit
=========================================================

* Product Page: https://themesberg.com/product/ui-kits/pixel-pro-premium-bootstrap-4-ui-kit
* Copyright 2019 Themesberg (https://www.themesberg.com)

* Coded by https://themesberg.com

=========================================================

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

-->
<!DOCTYPE html>
<html lang="en">

<head>
    @@include('./_head.html', {
        "path": "..",
        "title": "Pixel Documentation - File structure"
    })
</head>

<body>
    <a href="#doc-index" class="btn btn-lg btn-primary btn-block rounded-0 d-lg-none" data-toggle="collapse" data-target="#doc-index" aria-expanded="false" aria-controls="doc-index">
        <svg class="icon fill-white" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 17C3 17.5523 3.44772 18 4 18H20C20.5523 18 21 17.5523 21 17V17C21 16.4477 20.5523 16 20 16H4C3.44772 16 3 16.4477 3 17V17ZM3 12C3 12.5523 3.44772 13 4 13H20C20.5523 13 21 12.5523 21 12V12C21 11.4477 20.5523 11 20 11H4C3.44772 11 3 11.4477 3 12V12ZM4 6C3.44772 6 3 6.44772 3 7V7C3 7.55228 3.44772 8 4 8H20C20.5523 8 21 7.55228 21 7V7C21 6.44772 20.5523 6 20 6H4Z" />
        </svg>
        <span class="h6 text-white">Menu</span>
    </a>
    <section class="container-fluid py-4">
        <div class="row">
            @@include('./_docs-sidebar.html', {
                "path": "..",
                "docs-path": "."
            })
            <!-- Content -->
            <div class="col-12 col-lg-10">
                <div class="row">
                    <div class="col-xl-10 col-lg-9 px-xl-5 px-lg-3 px-md-3 py-md-5">
                        <div class="border-bottom">
                            <h1>File structure</h1>
                            <p class="lead text-dark">In this section we explain the role of each folder.</p>
                        </div>
                        <div class="my-5 mb-5" id="html">
                            <h5 class="mb-3">Html</h5>
                            <p>In the <code class="text-danger">html/</code> folder you'll find all of the html templates in the <code class="text-danger">components/</code>, <code class="text-danger">sections/</code> and <code class="text-danger">pages/</code>                                folders.</p>
                        </div>
                        <div class="my-5 mb-5" id="html">
                            <h5 class="mb-3">Partials</h5>
                            <p>Files in <code class="text-danger">partials/</code> are included in other html files with the help of <code class="text-danger">gulp-file-include</code>. Such files are <code class="text-danger">_footer.html</code>, <code class="text-danger">_head.html</code> and so on.</p>
                            <p>Please check the <a href="https://www.npmjs.com/package/gulp-file-include" target="_blank" rel="noopener">official documentation</a> to learn how to use these partials.</p>
                        </div>
                        <div class="my-5 mb-5" id="images">
                            <h5 class="mb-3">Images</h5>
                            <p><code class="text-danger">img/</code> holds all of the images and SVG's. Inside this folder there are other folders such as <code class="text-dark">/img/blog</code> which hold images based on the name of the folder.</p>
                            <p>When running <code class="text-danger">gulp build</code> these images will be moved to the <code class="text-danger">dist/assets/img</code> folder and they will be optimized. Check out our <a href="#">Gulp</a> section if you
                                want to disable this feature.</p>
                        </div>
                        <div class="my-5 mb-5" id="javascript">
                            <h5 class="mb-3">JS</h5>
                            <p>In the <code class="text-danger">js/</code> folder you'll find two important files. One of the is <code class="text-danger">pixel.js</code> where you will find the custom Javascript written by the Themesberg team. Here you
                                can write your custom Javascript. We have <code class="text-danger">jQuery</code> included as well.</p>
                            <p><code class="text-danger">pixel.min.js</code> is generated after running <code class="text-danger">gulp</code> and it is the file that is included in our templates.</p>
                        </div>
                        <div class="my-5 mb-5" id="scss">
                            <h5 class="mb-3">Scss</h5>
                            <p><code class="text-danger">scss/</code> is one of the most important files in our product. Here you'll find two folders and one important file:</p>
                            <div class="pl-5">
                                <p><code class="text-danger">scss/bootstrap</code> is the <code class="text-dark">scss</code> code from Bootstrap 4. As our product is an extension of the Bootstrap 4 components, we made use of the variables and mixins provided
                                    by them.</p>
                                <p><code class="text-danger">scss/pixel</code> holds the variables, mixins and custom components developed by Themesberg for Pixel.</p>
                                <div class="pl-5">
                                    <p><code class="text-danger">pixel/mixins</code> is where you can find the custom mixins developed by us similar to the ones from Bootstrap 4.</p>
                                    <p><code class="text-danger">pixel/utilities</code> has styles for custom helper classes for spacings, borders, shadows and many more.</p>
                                    <p><code class="text-danger">pixel/vendor</code> is the folder that holds styles for the external libraries we use for Pixel. We use them here so that there will be only one minified <code class="text-dark">css</code>                                        file. This way the files will load faster.</p>
                                    <p><code class="text-danger">*.scss</code> The remaining files are the styles used for each component from Pixel.</p>
                                </div>
                                <p><code class="text-danger">pixel.scss</code> is where all the other <code class="text-danger">scss</code> files are imported. This file is later used in <code class="text-danger">gulpfile.js</code> to compile the code in
                                    <code class="text-danger">CSS</code>.</p>
                            </div>
                        </div>
                        <div class="my-5 mb-5" id="vendor">
                            <h5 class="mb-3">Node modules</h5>
                            <p>The <code class="text-danger">node_modules/</code> folder contains external libraries generated based on <code class="text-danger">package.json</code>.</p>
                        </div>
                        <div class="my-5 mb-5" id="other-files">
                            <h5 class="mb-3">Other files</h5>
                            <p><code class="text-danger">gulpfile.js</code> is where you'll find the Gulp functions that generate, compile and serve our code.</p>
                            <p><code class="text-danger">index.html</code> is the main <code class="text-dark">html</code> template.
                            </p>
                            <p><code class="text-danger">package.json</code> holds the theme dependencies.</p>
                            <p><code class="text-danger">README.md</code> can never miss from a project. Here you can find basic information regarding the software we've developed.</p>
                            <p><code class="text-danger">.gitignore</code> is used to ignore folders such as <code class="text-dark">node_modules</code> or <code class="text-dark">dist</code> if you have a git instance.</p>
                        </div>
                        <div class="my-5 mb-5" id="generated-folders">
                            <h2 class="mb-3">Generated folders</h2>
                            <p class="lead text-dark">These folders are generated by using Gulp commands. <a href="#">Check
                                    them out here</a>.</p>
                            <hr>
                            <div class="my-5 mb-5">
                                <h5 class="mb-3">Dist</h5>
                                <p>The <code class="text-danger">dist/</code> folder will be generated when running the
                                    <code class="text-danger">gulp build:dist</code> command. You'll find <code class="text-dark">html</code>,
                                    <code class="text-dark">js</code> and <code class="text-dark">css</code> code in a minified state. Ideally you shouldn't modify the content of these files, as they are supposed to be the generated code that you'll use
                                    to go live.</p>
                            </div>
                            <div class="my-5 mb-5">
                                <h5 class="mb-3">Dev</h5>
                                <p>The <code class="text-danger">html&css/</code> folder can be generated by running <code class="text-danger">gulp build:dev</code>. This folder will have all the necessary files, <strong>unminified</strong> files of the project.
                                    We recommend to use this folder if you want a copy of the theme without Sass, Gulp or npm.</p>
                            </div>
                            <div class="my-5 mb-5">
                                    <h5 class="mb-3">.temp</h5>
                                    <p>You might be wondering what the <code class="text-danger">.temp/</code> folder is all about. Long story short you don't have to worry about it, as you shouldn't modify files from there. It is dynamically generated by Gulp to serve the files to a local server through BrowserSync and show you how the product will look when it will finally get generated for production.</p>
                                </div>
                            <div class="my-5 mb-5">
                                <h5 class="mb-3">CSS</h5>
                                <p>The <code class="text-danger">css/</code> folder is generated by <code class="text-danger">gulp</code> as it holds the compiled <code class="text-dark">scss</code> files. These files are automatically included by our
                                    <code
                                        class="text-danger">html</code> templates.</p>
                                <p>We recommend you to use <code class="text-danger">scss</code> as it is a powerful language where you can change variables to update colors, shadows, font families to your liking. If you choose otherwise, you can modify
                                    the main <code class="text-danger">pixel.css</code> file by writing simple CSS.</p>
                                <p><strong class="text-warning">Warning:</strong> if you write your own CSS in the
                                    <code class="text-danger">pixel.css</code> file and run <code class="text-danger">gulp</code> it will override your file based on what the <code class="text-danger">scss</code> files hold.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-3 d-none d-lg-block py-md-1 doc-sidebar border-left">
                        <ul class="nav flex-column">
                            <li class="nav-item">
                                <a href="#html" class="nav-link " data-smooth-scroll>Html</a>
                            </li>
                            <li class="nav-item">
                                <a href="#images" class="nav-link " data-smooth-scroll>Images</a>
                            </li>
                            <li class="nav-item">
                                <a href="#javascript" class="nav-link " data-smooth-scroll>Javascript</a>
                            </li>
                            <li class="nav-item">
                                <a href="#scss" class="nav-link " data-smooth-scroll>Scss</a>
                            </li>
                            <li class="nav-item">
                                <a href="#vendor" class="nav-link " data-smooth-scroll>Vendor</a>
                            </li>
                            <li class="nav-item">
                                <a href="#other-files" class="nav-link " data-smooth-scroll>Other files</a>
                            </li>
                            <li class="nav-item">
                                <a href="#generated-folders" class="nav-link " data-smooth-scroll>Generated folders</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- End of content -->
            </div>
        </div>
    </section>
    @@include('./_scripts.html', {
        "path": "../"
    })
</body>

</html>